<template>
        <div style="width:100%;height: auto" v-cloak>
<!--            <el-scrollbar>-->
<!--                <div style="width:1000px" class="con">-->
<!--                <div :style="{ width: (fileList.length+3)*150 + 'px' }" class="con">-->
                    <el-upload
                            :disabled="disable"
                            id="upload-resource"
                            :action="this.$global.apiUrl+'file/uploadImg'"
                            list-type="picture-card"
                            :file-list="fileList"
                            :on-success="handleSuccess"
                            :on-change="handleChange"
                            :before-upload="checkFileType"
                            accept="image/jpeg,image/png,image/tiff,image/tif"
                            multiple>

                        <div slot="default">
                            <el-popover
                                    placement="top-start"
                                    title="上传图片"
                                    width="200"
                                    trigger="hover">
                                <el-button size="medium" @click="chooseFile">本地</el-button>
                                <el-button size="medium" @click="callDrawer">图片库</el-button>
                                <div slot="reference" class="plusIcon" @mouseleave="disable=false" @mouseenter="disable=true">
                                    <i  class="el-icon-plus"></i>
                                </div>
                            </el-popover>
                        </div>

                        <div slot="file" slot-scope="{file}" v-loading="file.loading">
                            <el-image
                                    ref="preview"
                                    style="width: 100%; height: 100%"
                                    :src="file.url" >
                            </el-image>
                             <el-image-viewer
                                v-if="showViewer"
                                :on-close="handlePictureCardPreviewClose"
                                :url-list="srcList"
                            ></el-image-viewer>
                            <span class="el-upload-list__item-actions">
                <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)">
                    <el-tooltip content="放大" placement="top">
                        <i class="el-icon-zoom-in"></i>
                    </el-tooltip>
                </span>
                        <span
                                class="el-upload-list__item-preview"
                                @click="showTarget(file)">
                    <el-tooltip content="查看" placement="top">
                        <i class="el-icon-d-arrow-right"></i>
                    </el-tooltip>
                </span>
                <span
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)">
                    <el-tooltip content="删除" placement="top">
                        <i class="el-icon-delete"></i>
                    </el-tooltip>
                </span>
            </span>
                        </div>
                    </el-upload>
                </div>
<!--            </el-scrollbar>-->

<!--        </div>-->
</template>

<script>
    import eventBus from "../../global/eventBus";
    import ElImageViewer from "element-ui/packages/image/src/image-viewer";
    import thumbnail from "./thumbnail";
    import Tiff from 'tiff.js';
    export default {
        name: "PhotoList",
        data() {
            return {
                showViewer: false,
                disable:false,
                fileList:[],
                srcList: [],
                // riff: 1,
                // notriff:1,
            };
        },
        created() {
            var that = this
            eventBus.$on('repo2wks',data=>{
                data.forEach(item=>{
                    // console.log('从图片库来的')
                    var file={}
                    file.url=item.url
                    file.url4req = item.url4req
                    that.fileList.push(file)
                })
            })
        },
        mounted(){
            // console.log('obtainList',this.obtainList)
            this.fileList = this.$ls.get('fileList',[])
        },
        components: {
            ElImageViewer,
            thumbnail
        },
        // beforeDestroy() {
        //     console.log('在beforeDestroy')
        //     this.$ls.set('fileList',this.fileList)
        //     // if(this.fileList.length!==0){
        //     //
        //     // }
        // },
        methods: {
            checkFileType (file) {
                const fileName = file.name
                const fileType = fileName.substring(fileName.lastIndexOf('.'))
                // jpeg,.png,.jpg,.bmp,.gif
                if (
                    fileType === '.jpg' ||
                    fileType === '.png' ||
                    fileType === '.jpeg' ||
                    fileType === '.bmp' ||
                    fileType === '.gif' ||
                    fileType === '.tif' ||
                    fileType === '.tiff'
                ) {
                } else {
                    this.$message.error(
                        '请上传正确的图片类型'
                    )
                    return false
                }
            },
            //显示当前图片的结果
            showTarget(file){
                this.$emit('showTarget',file)
            },
            runDemo(index){
                console.log('添加了一张示例图片')
                const file = {}
                switch (index) {
                    case 1:
                        file.url4req=file.url='https://cdn.bewcf.info/softwareCup/4567aef7-8b78-42a3-b4b2-09741418c76e.png'
                        break
                    case 3:
                        file.url4req=file.url='https://cdn.bewcf.info/softwareCup/e236c210-d172-48b3-8b96-6f0d9e36c272.jpg'
                        break
                    case 4:
                        file.url4req=file.url='https://cdn.bewcf.info/softwareCup/4caa3e9a-39e0-4a90-aec4-d8340d7217c6.jpg'
                        break
                    default:break
                }
                var flag = false
                if(this.fileList.length>0){
                    this.fileList.forEach(item=>{
                        if(item.url===file.url){
                            flag=true
                        }
                    })
                }
                if(!flag){
                    if(Object.keys(file).length!==0){
                        this.fileList.push(file)
                    }
                }else{
                    this.$message.error('当前文件已经存在!');
                }

            },
            chooseFile() {
                document.querySelector("#upload-resource .el-upload").click()
            },
            callDrawer(){
                eventBus.$emit('callDrawer',true)
            },
            handleRemove(file) {
                // console.log(file.id);
                var index = this.fileList.indexOf(file)
                // setTimeout("alert('test')", 3000 )
                this.fileList.splice(index,1)
                this.$emit('handleRemove',file)
            },
            handlePictureCardPreviewClose() {
                document.documentElement.style.overflowY = 'auto'
                this.showViewer = false
            },
            handlePictureCardPreview(file) {
                document.documentElement.style.overflowY = 'hidden'
                this.showViewer = true
                this.srcList=[]
                this.srcList.push(file.url)
                // this.$refs.preview.showViewer = true
            },
            handleChange(file, fileList) {
                console.log('在handleChange')
                file.loading=!file.loading
                if(file.loading){
                    var type = file.name.substring(file.name.lastIndexOf('.'))
                    if (type==='.tif'||type==='.tiff') {
                        try {
                            var xhr = new XMLHttpRequest();
                            xhr.responseType = 'arraybuffer';
                            xhr.open('GET', file.url);
                            xhr.onload = (e) => {
                                var tiff = new Tiff({ buffer: xhr.response });
                                var canvas = tiff.toCanvas();
                                file.url = canvas.toDataURL();
                            };
                            xhr.send();
                        }catch (e) {
                            // this.src = this.file.url;
                        }
                    }
                }
                this.fileList = fileList;
            },
            handleSuccess(res,file,fileList){
                // console.log('在HandleSuccess')
                if(res.code===200){
                    try {
                        var type = res.data.substring(res.data.lastIndexOf('.'))
                        if (type==='.tif'||type==='.tiff') {
                            var xhr = new XMLHttpRequest();
                            xhr.responseType = 'arraybuffer';
                            xhr.open('GET', res.data);
                            xhr.onload = (e) => {
                                var tiff = new Tiff({ buffer: xhr.response });
                                var canvas = tiff.toCanvas();
                                file.url = canvas.toDataURL();
                            };
                            xhr.send();
                        } else {
                            file.url=res.data
                        }
                        file.url4req=res.data
                    }catch (e) {
                        this.$message.error('网络错误，稍后再试')
                    }
                    console.log(file.url)
                }
            }
        }
    }
</script>

<style scoped>

</style>
